<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>LayuiDemo</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body>
<div style="text-align: center">
    <h1>设置列表</h1>

    <br/>
    <div class="demoTable">
        搜索设置：
        <div class="layui-inline">
            <input class="layui-input" name="imei" id="imei" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button class="layui-btn" id="add" onclick="toSave()">新增</button>
    </div>

    <!--class="layui-hide"-->
    <table  id="test" lay-filter="test" ></table>
    <!--操作列-->
    <script type="text/html" id="barDemo">

        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</div>
<script>
    function toSave() {

        layer.open({
            type: 2,
            title:"新增设置"
            ,area: ['700px', '500px']
            ,id: 'toSetting' //防止重复弹出
            ,content: "/toSetting"
            //,btn: ['确认', '取消']
            ,btnAlign: 'c' //按钮居中
            ,shade: 0.1 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            },
            success: function(layero, index){
                console.log(layero, index);
            }
        });
    }
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/getSettingList'
            ,page: true
            ,id: 'testReload'
            ,width:1550
            ,cols: [
                [
                    {field:'sid', width:120, title: '编号',align: 'center'},
                    {field:'imei', width:200, title: 'imei号',align: 'center'},
                    {field:'setting', width:200, title: '设置内容',align: 'center'},
                    {field:'submitTime', width:100, title: '设置时间',align: 'center'},
                    {field:'', title: '操作', align: 'center',width:333,toolbar:"#barDemo"}
                ]
            ]
        });

        /*重新加载数据表格*/
        var $ = layui.$, active = {
            reload: function(){
                var imei = $('#imei');
                table.reload('testReload', {
                    where: {
                        imei: imei.val()
                    }
                });
            }
        };

        /*绑定搜索点击事件*/
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //console.log(data);
                    $.ajax({
                        url: "/settingDelete",
                        type: "POST",
                        data:{"sid":data.sid},
                        dataType: "json",
                        success: function(data){
                            if(data==1){
                                layer.msg("删除成功", {icon: 6});
                                /*重新加载数据表格*/
                                var term = $('#term');
                                table.reload('testReload', {
                                    where: {
                                        term: term.val()
                                    }
                                });
                            }else{
                                layer.msg("删除失败", {icon: 5});
                            }
                        }

                    });
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title:"修改设置"
                    ,area: ['700px', '500px']
                    ,id: 'toUpdate' //防止重复弹出
                    ,content: "/toUpdate?sid="+data.sid
                    //,btn: ['确认', '取消']
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0.1 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    },
                    success: function(layero, index){
                        console.log(layero, index);
                    }
                });

            }
        });
    });
</script>
</body>
</html>